<template id="first">
  <fieldset>
    <div id="top" :class="border">
      编号：<input
        id="ipt1"
        type="text"
        :class="margin"
        v-model="bianhao"
        v-on:keydown.enter="add"
        ref="searchInput1"
      />
      品牌名称：<input
        id="ipt2"
        type="text"
        v-model="pinpai"
        :class="margin"
        v-on:keydown.enter="add()"
        ref="searchInput"
      />
      <!-- <button v-on:click="add">{{ msg }}</button> -->
      <button @click="add">{{ msg }}</button>
    </div>
    <model :visible="isShow" @confirm="confirm" @cancel="cancel">
      <template slot="title">
        <h1>警告</h1>
      </template>
      <template slot="body">
        <h3>有数据么有填写？？</h3>
      </template>
    </model>
  </fieldset>
</template>
<script>
import model from "./model.vue";
export default {
  data() {
    return {
      msg: "增加",
      border: "border",
      bianhao: "",
      pinpai: "",
      margin: "margin",
      isShow: false,
    };
  },
  components: {
    model,
  },

  mounted() {
    this.$refs.searchInput1.focus(); //获取焦点
  },
  methods: {
    confirm() {
      this.isShow = false;
      return;
    },
    cancel() {
      //点击取消按钮
      this.isShow = false;
      console.log("qx");
      return;
    },

    add() {
      let bianhao = this.bianhao;
      let pinpai = this.pinpai;
      if (!bianhao || !pinpai) {
        //非空验证
        this.isShow = true;
        // alert("编号或品牌没有输入");
        return;
      }
      let obj = {
        id: bianhao,
        name: pinpai,
        timer: new Date().toLocaleTimeString(),
        operation: "删除",
      };
      this.$bus.$emit("add-todo", obj);
      (this.bianhao = ""), //输入完成清空
        (this.pinpai = ""),
        this.$refs.searchInput1.blur(); //移出焦点事件
      this.$refs.searchInput.blur();
    },
  },
};
</script>
<style scoped>
.border {
  border: 1px solid rgb(139, 19, 39);
  width: 600px;
  height: 36px;
}
.margin {
  margin-top: 8px;
}
fieldset {
  border: 0;
}
</style>
